<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-09-06 10:52:22
 * @LastEditors: 朱江洲
 * @LastEditTime: 2021-09-06 10:57:24
-->
<template>
  <div>
    <div class="tableShow">
      <div class="content">
        <draggable
          v-model="switchList"
          chosenClass="active"
          animation="500"
          @end="dragEnd"
          class="draggable"
        >
          <el-switch
            v-for="(item, index) in switchList"
            :key="index"
            v-model="item.value"
            :active-text="item.label"
            style="margin-top: 13px; display: block"
          >
          </el-switch>
        </draggable>
      </div>
      <div class="footer">
        <el-button type="primary" @click="submit" size="small">保存</el-button>
        <el-button class="btn" size="small">重置</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable,
  },
  props: {
    dialog: {
      type: Object,
      required: true,
    },
    switchShow: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      search: "",
      switchList: [],
    };
  },
  created() {
    this.switchList = this.switchShow;
  },
  methods: {
    dragEnd() {},
    submit() {
      localStorage.setItem("staffSwitch", JSON.stringify(this.switchList));
      this.$emit("submit", this.switchList);
      this.dialog.dialogTableVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
.tableShow {
  background-color: #fff;
}
.content {
  width: 250px;
  height: 320px;
  overflow-y: auto;
  padding-left: 12px;
}
.draggable {
  width: 100%;
  height: 300px;
}
.footer {
  text-align: right;
  padding-bottom: 5px;
}
/deep/.el-button {
  border: 0;
}
.btn {
  background-color: #f5f8fa;
}
/deep/ .el-input__inner {
  margin-top: 12px;
}
.el-switch {
  margin-top: 15px;
}
</style>